<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body onload="draw()">
    <canvas id="mycanvas" height="150" width="150"></canvas>
    <script>
        // line的lineJoin属性，这是线段的交叉的样式
        function draw() {
            // 分别对应圆头、斜面（斜角）、斜接
            const lineJoin = ["round", "bevel", "miter"];
            const canvasId = $("#mycanvas")[0];
            const ctx = canvasId.getContext && canvasId.getContext("2d");
            ctx.lineWidth = 10;
            for (let i = 0, len = lineJoin.length; i < len; i++) {
                ctx.beginPath();
                ctx.lineJoin = lineJoin[i];
                ctx.moveTo(-5, 5 + i * 40);
                ctx.lineTo(35, 45 + i * 40);
                ctx.lineTo(75, 5 + i * 40);
                ctx.lineTo(115, 45 + i * 40);
                ctx.lineTo(155, 5 + i * 40);
                ctx.stroke();
            }
        }
    </script>
</body>
</html>